<template>
    <div class="smslogin">
        <div class="logo">
          <img src="@/assets/images/login.png" alt="" />
        </div>
        <form>
          <div :class="{ active: active == 1 }">
            <input type="text" placeholder="请输入手机号" @blur="active = ''" @focus="active = 1" v-model="form.mobile" />
            <div style="width: 300px" v-if="flag" @click="sendcode">获取验证码</div>
        
            <div v-else style="width: 360px; color: #999">
              获取验证码({{ timer }})
            </div>
          </div>
        
          <div :class="{ active: active == 2 }">
            <input type="text" placeholder="请输入短信验证码" @blur="active = ''" @focus="active = 2" v-model="form.sms_code" />
          </div>
        
          <div style="color: #999; font-size: 20px">
            <p>*未注册的手机号将自动注册</p>
            <p>使用密码登录</p>
          </div>
          <div class="login">
            <p @click="toLogin">登录</p>
          </div>
        </form>
    </div>
</template>

<script>
import { getSmsCode,getLogin } from "@/http/login"
export default {
  data(){
    return {
      active:"",
      flag:true,
      timer:60,
      form :{
        mobile:"",
        sms_type:"login",
        sms_code:"",
        type:2,
        client:""
      }
    }
  },
  methods:{
    async toLogin(){
      let res = await getLogin(this.form)
       console.log(res);
       if(res.code==200){
        this.$router.push("/login")
       }else{
        this.$Toast.fail(res.msg)
         this.$router.push("/login")
       }
      },
   async sendcode(){
      const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if(!reg.test(this.form.mobile)){
        this.$Toast.fail("不是手机号");
      }else{
        this.flag = false
      }
      let res = await getSmsCode(this.form)
      console.log(res);
      let t=setInterval(()=>{
       if(this.timer>0){
        this.timer--
       }else{
        this.timer=60
        this.flag=true
        clearInterval(t)
       }
      },2000)
    }
  }
}
</script>

<style lang="scss">
.logo {
  width: 100vw;
  height: 200px;
  text-align: center;

  img {
    width: 525px;
    height: 115px;
    margin: 50px;
  }
}

form {
  font-size: 30px;

  >div {
    width: 80vw;
    display: flex;
    justify-content: space-between;
    margin: 50px auto;
  }

  input {
    border: none;
    width: 100%;
  }
}

.active {
  border-bottom: 1px solid red;
}

.login {
  width: 80vw;
  height: 60px;
  background: url(../assets/theme-img/login-btn.png) no-repeat;
  background-size: 100% 100%;

  p {
    margin: 10px auto;
    color: #fff;
  }
}
</style>
